<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for  数据遍历</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
            padding: 20px;
        }
        #app {
            width: 100%;
            max-width: 800px; /* 可以根据需要调整最大宽度 */
            margin: 0; /* 居中对齐，如果不需要居中，可以改为 margin: 0; */
            padding: 0; /* 移除默认外边距 */
        }
        h1 {
            color: #f91212;
            text-align: center;
        }
        table {
            width: 100%;
            max-width: 600px;
            margin: 20px auto;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #008080;
            color: white;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        button {
            background-color: #7adbfb;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }
        button:hover {
            background-color: #77d6fe;
        }
        span {
            display: block;
            text-align: center;
            margin-top: 20px;
            font-size: 1.2em;
            color: #888;
        }
        ul {
            list-style-type: none; /* 移除列表项前的符号 */
            padding: 0; /* 移除默认内边距 */
        }
        li {
            padding: 5px 0; /* 列表项之间的间距 */
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <table border="1px" v-if="cart.length!=0">
            <tr>
                <td>编号</td>
                <td>商品名称</td>
                <td>单价</td>
                <td>数量</td>
                <td>小计</td>
                <td>操作</td>
            </tr>
            <tr v-for="p,index in cart" :key="p.id">
                <td>{{p.id}}</td>
                <td>{{p.name}}</td>
                <td>{{p.price}}</td>
                <td>{{p.count}}</td>
                <td>{{p.price*p.count}}</td>
                <td><button @click="del(p.id)">删除</button></td>
            </tr>
        </table>
        <span v-if="cart.length==0">
            购物车为空，请添加商品！    
        </span>
        <ul>
            <li v-for="ATM,index in list" :key="index">{{ATM}}</li>
        </ul>
    </div>
</body>
</html>
<script src="./js/2.7.14_dist_vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"购物车",
            cart:[
                {id:'1',name:'苹果',price:'5',count:'2'},
                {id:'2',name:'哈密瓜',price:'12',count:'1'},
                {id:'3',name:'飞天茅台',price:'15000',count:'2'},
            ],
            list:[
                '喜洋洋','美洋洋','懒洋洋','沸洋洋'
            ]
        },
        methods:{
            del(id){
                this.cart = this.cart.filter((item) => item.id !=id);
            },
        },
    })
</script>